<template>
  <div>
  <el-table
    :data="content.data.data"
    stripe
    border
    style="width: 100%"

  >
    <el-table-column
      prop="id"
      label="序号"
      >

    </el-table-column>
    <el-table-column
      prop="user_id"
      label="管理员ID"
      >
    </el-table-column>
    <el-table-column
      prop="username"
      label="管理员账号">
    </el-table-column>
    <el-table-column
      prop="type"
      label="操作类型"
      :formatter="toChinaName"
    >
    </el-table-column>
    <el-table-column
      prop="action"
      label="操作action" width="500px">
    </el-table-column>
    <el-table-column

      label="操作信息">
      <template slot-scope="scope">
        <el-link icon="el-icon-bank-card" @click="getParam(scope.row.remark,'操作信息')"></el-link>
      </template>
    </el-table-column>
    <el-table-column
      label="操作参数">
      <template slot-scope="scope">
        <el-link icon="el-icon-bank-card" @click="getParam(scope.row.param,'操作参数')"></el-link>
      </template>
    </el-table-column>

    <el-table-column
      label="操作时间"
      prop="create_time"
      :width="180"
     >
    </el-table-column>
    <el-table-column
      prop="ip"
      label="操作IP">
    </el-table-column>

  </el-table>

  <el-pagination
    background
    @size-change="handleSizePage"
    @current-change="handleCurrentChange"
    :current-page="this.content.meta.current_page"
    :page-sizes="[15, 50, 100]"
    :page-size="this.content.meta.per_page"
    layout="total, sizes, prev, pager, next, jumper"
    :total="this.content.meta.total"
  >
  </el-pagination>
  </div>
</template>
<script>
  export default {
    // eslint-disable-next-line vue/require-prop-types
    mounted() {

    },
    methods:{
      toChinaName(row,column){
        var d = ['其他操作','添加','更新','删除'];
        return d.[row.type];
      },
      getParam(message,name){
          this.$alert('<span  style="text-align: center;width: 100%;word-break: break-word">'+message+'</span>', name, {
            confirmButtonText: '确定',
            center: true,
            dangerouslyUseHTMLString: true

          });
      },
    handleCurrentChange(val){
   console.log(val);
      // eslint-disable-next-line no-undef
        this.$emit('page',{

             page: val,
             id:this.content.meta.id

           },
        )
    },
      handleSizePage(val){
        this.$emit('page',{
            per_page:val,
            id:this.content.meta.id,
          },
        )

      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        message:'',
        meta:{

          currentPage:'',
          pageSize:'',
          total:'',

        }
      }

    },
    props:['content'],
  }


</script>
